<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <script src="/static/JQuery/jquery-3.3.1.min.js"></script>
    <script src="/static/myJS/custom.js"></script>
</head>
<body class="" style="padding: 10px">
<form class="layui-form">
    <div class="layui-inline">
        搜索：
        <div class="layui-inline">
            <input class="layui-input" name="goodsname" id="goodsname" autocomplete="off" placeholder="商品名称">
        </div>
        <div class="layui-inline">
            <select class="layui-input layui-select" name="fktypeid" id="fktypeid" lay-search=""></select>
        </div>
        <button class="layui-btn" type="button" id="search" data-type="reload">搜索</button>
        <!--<button class="layui-btn" type="button" id="insert" data-type="insert">添加</button>-->
    </div>
</form>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>二手市场</legend>
</fieldset>
<div class="model-list">
    <ul class="flow-default" id="LAY_demo1" style="width: 100%; height: 650px; overflow: auto;"></ul>
</div>
</body>

</html>

<script>


    //JavaScript代码区域
    layui.use(['element','table','laydate','layer','form', 'flow'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var flow = layui.flow;

        initType(form);
        loadFlow(flow);
        var $ = layui.$, active = {
            reload: function(){
                loadFlow(flow);
            }
        };

        $('#search').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $('#insert').on('click', function(){
            localStorage.clear();
            layer.open({
                type: 2,
                title: 'iframe父子操作',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area : ['700px' , '550px'],
                content: "goodsEdit",
                skin: 'layui-layer-rim',
                end : function(){
                    table.reload("goodsTable");
                }
            });
        });
    });

    function loadFlow(flow) {
        var goodsname = $('#goodsname').val();
        var fktypeid = $("#fktypeid option:selected").val();
        $("#LAY_demo1").remove();
        $(".model-list").append("<ul id=\"LAY_demo1\" style=\"width: 100%; height: 650px; overflow: auto;\"></ul>");
        flow.load({
            elem: '#LAY_demo1' //流加载容器
            //,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
            //,isAuto:true
            ,end:"<p>到底啦！</p>"
            ,done: function(page, next){ //执行下一页的回调
                var lis = [];
                $.ajax({
                    url:"/restful/find",
                    type:"POST",
                    data:JSON.stringify({
                        firstTable: 'goods',
                        relations:{
                            "goods.fktypeid": "types.typeid",
                            "goods.fksellerid": "users.userid"
                        },
                        wheres: [
                            {field:"goods.goodsname", value: goodsname, mode:"2"},
                            {field:"types.typeid", value: fktypeid, mode:"1"}
                        ],
                        page:page,
                        limit:6
                    }),
                    contentType: "application/json;charset=utf-8",
                    dataType : "json",
                    async:false,

                    success : function(result) {
                        var data = result.data;
                        var count = result.count;
                        layui.each(data, function(index, item){
                            lis.push('<div class="layui-col-md3 layui-col-md-offset1" onclick=toDetail("' + item.goodsid + '")>' +
                                '<img width="100%" height="auto" src=/upload/' + item.goodsimg1 + '>' +
                                '<hr>' +
                                '<label>' + item.goodsname + '</label>' +
                                '<label style="float: right">￥' + item.goodsprice + '</label>' +
                                '<hr></div>' );
                        });

                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < count/6 + 1);
                    },
                    error:function(msg){
                        layer.alert(msg.msg);
                    }
                });
            }
        });
    }


</script>